<!--  -->
<template>
  <q-page class="q-px-md" style="max-width: 1200px">
    <!-- 查询操作 -->
    <q-toolbar class="q-pl-none">
      <q-input v-model="search" debounce="300" label="模糊搜索" dense hide-bottom-space />
      <q-space />
      <q-btn icon="excel" color="warning" :loading="exportLoading" @click="handleExport">导出</q-btn>
    </q-toolbar>

    <!-- 数据表格 -->
    <q-tree-table
      v-model:expanded="treeExpanded"
      :columns="columns"
      :nodes="treeOptions"
      node-key="buildingId"
      label-key="buildingName"
      :filter="search"
      title="楼宇结构树"
      default-expand-all
      accordion
    >
      <template #tree="{ node }">
        <q-icon :name="node.icon" class="q-mr-sm" />
        {{ node.buildingName }}
      </template>
      <template #cell-floor="{ node }">
        {{ node.buildingLevel > 0 ? node.floor : '' }}
      </template>
      <!-- prettier-ignore -->
      <template #cell-action="{ node }">
        <template v-if="node.buildingLevel >= 0">
          <q-btn v-if="node.buildingLevel < 2" flat round icon="plus" color="primary" @click.stop="handleAdd(node.areaId,node.buildingId,node.buildingLevel)" />
          <q-btn v-if="node.buildingLevel > 0" flat round icon="edit" color="primary" @click.stop="handleEdit(node.buildingId)" />
          <q-btn v-if="node.buildingLevel > 0" flat round icon="delete" color="error" @click.stop="handleDelete(node.buildingId)" />
        </template>
      </template>
    </q-tree-table>

    <!-- 表单窗口 -->
    <q-dialog v-model="dialog" persistent>
      <building-form :id="buildingId" :parent="parent" :title="title" @close="closeDialog" @after-save="loadBuildingTree" />
    </q-dialog>
  </q-page>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { usePageQuery, useTable, useFormDialog, useCrud } from 'src/composables';

  import crudApi, { getBuildingTree, BuildingDto } from 'src/api/community/building';
  import BuildingForm from './BuildingForm.vue';

  // 定义组件名
  defineOptions({ name: 'Building' });

  // 查询条件
  const query = usePageQuery({});

  onMounted(() => {
    loadBuildingTree();
  });

  // 表格数据
  const { tc } = useTable();
  const columns = [
    tc('buildingLeveLName', '楼栋类型', 100),
    tc('buildingTypeName', '建筑类型', 100),
    tc('buildingUsageName', '建筑用途', 100),
    tc('buildingDirectionName', '楼房朝向', 100),
    tc('floor', '建筑层数', 100),

    tc('action', '操作', 120, 'left'),
  ];

  const { handleDelete: deleteAction, exportLoading, handleExport } = useCrud(crudApi, query);
  const handleDelete = (ids: IdType[]) => deleteAction(ids, loadBuildingTree);

  const search = ref('');
  const treeOptions = ref<BuildingDto[]>([]);
  const treeExpanded = ref<IdType[]>([0]);

  // 加载数据
  function loadBuildingTree() {
    getBuildingTree().then((data) => {
      treeOptions.value = data;
      data.forEach((t) => treeExpanded.value.push(t.buildingId));
    });
  }

  // 表单窗口
  const { dialog, title, id: buildingId, handleEdit, closeDialog } = useFormDialog('小区楼栋');
  const parent = ref<{ areaId: string | undefined; parentId: string | undefined; buildingLevel: number }>({
    areaId: undefined,
    parentId: undefined,
    buildingLevel: 1,
  });
  function handleAdd(areaId: string, buildId: string, level: number) {
    title.value = '新增小区楼栋';
    buildingId.value = '';
    parent.value.areaId = areaId;
    if (level == 1) {
      parent.value.parentId = buildId;
    } else {
      parent.value.parentId = undefined;
    }
    parent.value.buildingLevel = level + 1;

    dialog.value = true;
  }
</script>

<style lang="scss" scoped></style>
